<div class="container">
  <div class="bg-putih">
    <div class="jdl-page">
      Analisa Obat
      <div class="clearfix"></div>
    </div>    
    <?php echo form_open('materi_soal/add', array('role' => 'form', 'id' => 'form'));?>
      <div class="box-body"> 
        <div class="form-group">
          <table class="table table-striped" style="width: 400px;">
            <thead>
              <tr style="background-color: #fff; color: #000;">
                <th width="250">Nama Obat</th>
                <th width="30">
                  <a href="javascript:add_data()" onclick="">
                    <span class="btn btn-xs btn-success btn-flat glyphicon  glyphicon-plus"></span>
                  </a>
                </th>
              </tr>
            </thead>
            <tbody id="tbody_jenis_soal">
              <tr>
                <td>
                  <select class="form-control obat" name="obat[]">
                    <?php
                      foreach($obat as $value) {
                        echo "<option value=$value[KdObat]>$value[NmObat]</option>";
                      }
                    ?>
                  </select>
                </td>
                <td width="30">
                  <a href="javascript:void(null)" title="Hapus" onclick="hapusData(this)">
                    <span class="btn btn-xs btn-danger btn-flat glyphicon  glyphicon-trash"></span>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>                         
      <div class="box-footer">
        <button type="submit" class="btn btn-sm btn-primary btn-flat"><i class="fa fa-floppy-o"></i> Tambahkan</button>
      </div>
    <?php echo form_close();?>
    <div class="clearfix"></div>
  </div>
</div> <!-- /container -->

<script type="text/javascript">
  $(document).ready(function() {
    $(".obat").select2(); 
    /* Select2 ini hanya berjalan pada saat pertama kali file diload, sementara pada saat tambah form dinamis
    file tidak di load ulang sehingga select2 tidak berfungsi di form berikutnya */
  });
</script>

<script type="text/javascript">
  function hapusData(obj){  
    if (confirm('Apakah data akan dihapus ?')) {
      obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
    }
  }

  function add_data(){
    var tampil_tombol_aksi = '<a href="javascript:void(null)" title="Hapus" onclick="hapusData(this)"><span class="btn btn-xs btn-danger btn-flat glyphicon  glyphicon-trash"></span></a>';
    var tr = document.createElement('tr');
    var td_jawaban = document.createElement('td');
    var td_aksi = document.createElement('td');     
    var tbodi = document.getElementById("tbody_jenis_soal");
    
    td_aksi.className = 'links';
    td_aksi.width = 15;
    td_jawaban.innerHTML = "<select class='form-control obat' name='obat[]'><?php foreach($obat as $value) { echo "<option value=$value[KdObat]>$value[NmObat]</option>";}?></select>";
    td_aksi.innerHTML = tampil_tombol_aksi;
    tr.appendChild(td_jawaban);
    tr.appendChild(td_aksi);
    tbodi.appendChild(tr);
    $(".obat").select2(); //Mengubah form .obat menjadi select2 pada saat klik tombol tambah
  }
</script>
